<template>
	<view class="help">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index"
				@click="pageRoute('/servePages/earn/help-detail?id=' + item.id)">
				<view class="tit">{{item.title}}</view>
				<view class="time">{{item.publish_time}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '帮助中心',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isMore: true,
		list: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getData() {
		if (!state.isMore) {
			util.showTip('没有更多了');
			return;
		}

		let params = {
			channel_id: 25,
			skip: state.list.length,
		};
		request.get('content/getColumnArticle', params).then(res => {
			console.log('帮助文档', res);
			state.isMore = res.data.is_more;
			if (state.list.length == 0) {
				state.list = res.data.list;
			} else {
				state.list = state.list.concat(res.data.list);
			}
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.help {
		.list {
			padding: 24rpx;
			background: #fff;

			.item {
				border-bottom: #f7f7fb solid 1rpx;
				padding: 0 0 20rpx 0;
				margin: 0 0 20rpx 0;

				.tit {
					font-size: 32rpx;
					font-weight: 600;
				}

				.time {
					font-size: 24rpx;
					color: #717171;
				}
			}
		}
	}
</style>